// 作文批改小程序主脚本

// 模拟当前时间
function updateTime() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  document.querySelectorAll('.status-bar .time').forEach(el => {
    el.textContent = `${hours}:${minutes}`;
  });
}

// 模拟网络信号和电池状态
function initStatusBar() {
  document.querySelectorAll('.status-bar .icons').forEach(el => {
    el.innerHTML = `
      <i class="fas fa-signal"></i>
      <i class="fas fa-wifi"></i>
      <i class="fas fa-battery-three-quarters"></i>
    `;
  });
  updateTime();
  setInterval(updateTime, 60000);
}

// 初始化标签栏激活状态
function initTabBar() {
  const tabItems = document.querySelectorAll('.tab-item');
  tabItems.forEach(item => {
    item.addEventListener('click', function() {
      tabItems.forEach(tab => tab.classList.remove('active'));
      this.classList.add('active');
    });
  });
}

// 文件上传预览
function initFileUpload() {
  const fileInput = document.getElementById('essay-upload');
  const uploadArea = document.querySelector('.upload-area');
  const previewContainer = document.getElementById('preview-container');
  
  if (fileInput && uploadArea) {
    uploadArea.addEventListener('click', () => fileInput.click());
    
    fileInput.addEventListener('change', function(e) {
      if (this.files && this.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
          if (previewContainer) {
            previewContainer.innerHTML = `
              <div class="card">
                <h3>预览图片</h3>
                <img src="${e.target.result}" alt="作文预览" style="max-width: 100%; border-radius: 8px;">
                <div class="mt-4">
                  <button class="btn btn-block" id="submit-essay">开始批改</button>
                </div>
              </div>
            `;
            
            document.getElementById('submit-essay').addEventListener('click', submitEssay);
          }
        };
        
        reader.readAsDataURL(this.files[0]);
      }
    });
  }
}

// 模拟提交作文进行批改
function submitEssay() {
  const loadingEl = document.createElement('div');
  loadingEl.className = 'card text-center';
  loadingEl.innerHTML = `
    <div class="mb-4">
      <i class="fas fa-spinner fa-spin" style="font-size: 48px; color: var(--primary-color);"></i>
    </div>
    <h3>正在批改作文...</h3>
    <p>AI正在分析您孩子的作文，请稍候</p>
  `;
  
  const previewContainer = document.getElementById('preview-container');
  if (previewContainer) {
    previewContainer.innerHTML = '';
    previewContainer.appendChild(loadingEl);
    
    // 模拟批改延迟
    setTimeout(() => {
      window.location.href = 'pages/correction.html';
    }, 2000);
  }
}

// 模拟充值积分
function initRechargeOptions() {
  const options = document.querySelectorAll('.recharge-option');
  if (options.length > 0) {
    options.forEach(option => {
      option.addEventListener('click', function() {
        options.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    const payButton = document.getElementById('pay-button');
    if (payButton) {
      payButton.addEventListener('click', function() {
        const activeOption = document.querySelector('.recharge-option.active');
        if (activeOption) {
          const amount = activeOption.getAttribute('data-amount');
          const points = activeOption.getAttribute('data-points');
          
          const loadingEl = document.createElement('div');
          loadingEl.className = 'card text-center';
          loadingEl.innerHTML = `
            <div class="mb-4">
              <i class="fas fa-spinner fa-spin" style="font-size: 48px; color: var(--primary-color);"></i>
            </div>
            <h3>正在处理支付...</h3>
            <p>请稍候，正在连接微信支付</p>
          `;
          
          const container = document.querySelector('.container');
          if (container) {
            container.innerHTML = '';
            container.appendChild(loadingEl);
            
            // 模拟支付延迟
            setTimeout(() => {
              container.innerHTML = `
                <div class="card text-center">
                  <div class="mb-4">
                    <i class="fas fa-check-circle" style="font-size: 48px; color: var(--success);"></i>
                  </div>
                  <h3>支付成功</h3>
                  <p>您已成功充值 ${amount} 元，获得 ${points} 积分</p>
                  <div class="mt-4">
                    <a href="profile.html" class="btn btn-block">返回个人中心</a>
                  </div>
                </div>
              `;
            }, 2000);
          }
        }
      });
    }
  }
}

// 登录和手机号绑定
function initLogin() {
  const loginButton = document.getElementById('login-button');
  if (loginButton) {
    loginButton.addEventListener('click', function() {
      const loadingEl = document.createElement('div');
      loadingEl.className = 'text-center';
      loadingEl.innerHTML = `
        <div class="mb-4">
          <i class="fas fa-spinner fa-spin" style="font-size: 48px; color: var(--primary-color);"></i>
        </div>
        <h3>正在授权登录...</h3>
        <p>请稍候，正在连接微信</p>
      `;
      
      const container = document.querySelector('.login-container');
      if (container) {
        container.innerHTML = '';
        container.appendChild(loadingEl);
        
        // 模拟登录延迟
        setTimeout(() => {
          window.location.href = 'pages/phone-bind.html';
        }, 2000);
      }
    });
  }
  
  const bindButton = document.getElementById('bind-phone-button');
  if (bindButton) {
    bindButton.addEventListener('click', function() {
      const phoneInput = document.getElementById('phone');
      const codeInput = document.getElementById('code');
      
      if (phoneInput && codeInput && phoneInput.value && codeInput.value) {
        const loadingEl = document.createElement('div');
        loadingEl.className = 'text-center';
        loadingEl.innerHTML = `
          <div class="mb-4">
            <i class="fas fa-spinner fa-spin" style="font-size: 48px; color: var(--primary-color);"></i>
          </div>
          <h3>正在验证...</h3>
          <p>请稍候，正在验证手机号</p>
        `;
        
        const container = document.querySelector('.container');
        if (container) {
          container.innerHTML = '';
          container.appendChild(loadingEl);
          
          // 模拟验证延迟
          setTimeout(() => {
            window.location.href = 'home.html';
          }, 2000);
        }
      }
    });
  }
  
  const sendCodeButton = document.getElementById('send-code');
  if (sendCodeButton) {
    sendCodeButton.addEventListener('click', function() {
      const phoneInput = document.getElementById('phone');
      if (phoneInput && phoneInput.value) {
        this.disabled = true;
        let countdown = 60;
        this.textContent = `${countdown}秒后重新发送`;
        
        const timer = setInterval(() => {
          countdown--;
          this.textContent = `${countdown}秒后重新发送`;
          if (countdown <= 0) {
            clearInterval(timer);
            this.disabled = false;
            this.textContent = '发送验证码';
          }
        }, 1000);
      }
    });
  }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  initStatusBar();
  initTabBar();
  initFileUpload();
  initRechargeOptions();
  initLogin();
  
  // 根据当前页面路径激活对应的标签
  const currentPath = window.location.pathname;
  const tabItems = document.querySelectorAll('.tab-item');
  
  tabItems.forEach(item => {
    const href = item.getAttribute('data-href');
    if (href && currentPath.includes(href)) {
      item.classList.add('active');
    }
  });
}); 